<template>
	<div>
		<header>
			<div class="headerLogo">
				<div style="float: left;font-size: 25px;" @click="$router.back()">
					<i class="icon-angle-left"></i>
				</div>
				<div style="float: right;margin-top: 10px;">
					<i class=" icon-list"></i>					
				</div>

			</div>
			<div class="headerTop">
				<img v-if="isLoad" :src="'https://fuss10.elemecdn.com/' + jpeg(shopmessage.image_path) "/>
				<div class="topleft">
					<p>{{shopmessage.name}}</p>
					<p>商家配送/{{shopmessage.order_lead_time}}分钟送达/配送费{{shopmessage.float_delivery_fee}}元</p>
					<p>公告：{{shopmessage.promotion_info}}</p>
				</div>
				<ul class="active">
					<li v-for="active in shopmessage.activities">
						<span :style="{backgroundColor: '#' + active.icon_color }">{{active.icon_name}}</span>
						{{active.description}}
					</li>
				</ul>
			</div>
		</header>
		<div class="chosebutton">
			<span @click="choseleft">商品</span>
			<span @click="choseright">评价</span>
		</div>
		<div v-if="choseLeft">
			<sell-left></sell-left>
		</div>
		<div v-if="choseRight">
			<sellright></sellright>
		</div>
		
	</div>
</template>

<script type="text/javascript">
	import $ from '../../assets/jquery.js'
	import '../../assets/Font-Awesome-3.2.1/css/font-awesome.min.css'
	import SellLeft from './sellchildleft'
	import sellright from './sellchildRight'
	import axios from 'axios'
	export default{
		name:'sellchild1',
		data:function(){
			return{
				isLoad:false,
				shopmessage:{},
				choseLeft:true,
				choseRight:false,
				
			}
		},
		components: {
	    	SellLeft,sellright
		},
		methods:{
			jpeg:function(value){
  				var out 				
  				var result = value.substring(value.length-3)
  				if(result == 'peg'){
  					out = value + '.jpeg'
  				}else{
  					out = value + '.png'
  				}
  				var result1 = out.substring(0,1) + '/' + out.substring(1,3) + '/' + out.substring(3)
  				return result1
  			},
  			choseleft:function(){
  				this.choseLeft=true,
  				this.choseRight=false
  				$('.chosebutton span:nth-of-type(1)').css({"color":"#3190e8","border-bottom":"2px solid #3190e8"})
  				$('.chosebutton span:nth-of-type(2)').css({"color":"#666666","border-bottom":"0px solid #3190e8"})
  			},
  			choseright:function(){
  				this.choseLeft=false,
  				this.choseRight=true
  				$('.chosebutton span:nth-of-type(1)').css({"color":"#666666","border-bottom":"0px solid #3190e8"})
  				$('.chosebutton span:nth-of-type(2)').css({"color":"#3190e8","border-bottom":"2px solid #3190e8"})
  				
  			}
		},
		created:function(){
			var id = this.$route.params.id
			axios.get('https://mainsite-restapi.ele.me/shopping/restaurant/'+id+'?extras[]=activities&extras[]=album&extras[]=license&extras[]=identification&extras[]=statistics&latitude=34.72856&longitude=113.75245')
			.then(function(res){
				this.shopmessage = res.data
				this.isLoad = true
			}.bind(this))
			.catch(function(error){
				console.log(error)
			})
		}
	}
	
</script>

<style type="text/css" scoped="">
    *{box-sizing: border-box;}
    html,body { height: 100%; padding: 0; margin: 0; }
	header{width: 100%;background-color:#9d96a5 ;color: white;padding-bottom: 2px;border: 1px solid transparent;}
	.headerLogo{width: 100%;height: 30px;padding: 0px 20px;}
	header img{width: 80px;height: 80px;border-radius:10px; float: left;margin-right: 10px;float: left;display: block;}
	.headerTop{width: 100%;padding: 10px; border: 1px solid transparent;}
	.topleft{float: left; width: 70vw;font-size: 12px;line-height: 28px;}
	.topleft p:nth-of-type(3){white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
	.topleft p:nth-of-type(1){font-size: 22px;font-weight: 800;}
	.active{font-size: 13px;}
	.active li span{margin: 0px 15px;border-radius:2px ;}
	/*列表选择按钮*/
	.chosebutton{display: flex; flex-wrap: wrap;justify-content:space-around;border-bottom: 1px solid darkgray;}
	.chosebutton span{display: inline-block;width:50px;height: 50px;line-height: 60px;margin-bottom: 10px;font-size: 22px;color:#666666 ;text-align: center;}
</style>